import axios from 'axios'
import MyTree from './components/Tree'
import { countTreeNodes, selectTreeNodes } from './utils/treeHandler'
import Mock from 'mockjs'
import { getTreeList } from './mock'
import { useEffect } from 'react'
import { treeStore } from './store/store'
import { observer } from 'mobx-react-lite'
import { Button, Card, Checkbox, Flex, Input, InputNumber, Space } from 'antd'
import _ from 'lodash-es'
import GAmap from './components/2d-map'

Mock.mock(/\/get\/tree\/list/, 'post', getTreeList)

const Header = observer(() => {
	console.log('测试git')
	console.log('测试git2')

	return (
		<>
			<Flex style={{ marginBottom: 10 }}>
				<Space>
					<Checkbox
						indeterminate={
							selectTreeNodes(treeStore.checkedNodes).length > 0 &&
							selectTreeNodes(treeStore.checkedNodes).length < selectTreeNodes(treeStore.treeData).length
						}
						checked={treeStore?.isCheckedAll}
						onChange={(e) => treeStore.onCheckAll(e)}
					/>
					<span>勾选全部</span>
					<span>数量：{countTreeNodes(treeStore.checkedNodes)}</span>
					<Input
						onChange={(e) => {
							treeStore.searchValue = e.target?.value
							treeStore.onSearch(treeStore.searchValue)
						}}
						placeholder="请输入关键字进行搜索"
					/>
				</Space>
				<InputNumber min={1} max={90} />
			</Flex>
			<Flex>
				<Space>
					<Button
						type="primary"
						onClick={() => {
							treeStore.isOpenAll = true
							treeStore.setExpandTreeLeafs(selectTreeNodes(treeStore?.treeData))
						}}
					>
						全部展开
					</Button>
					<Button
						type="primary"
						onClick={() => {
							treeStore.isOpenAll = false
							treeStore.setExpandTreeLeafs([])
						}}
					>
						全部折叠
					</Button>
				</Space>
			</Flex>
		</>
	)
})

const App = observer(() => {
	useEffect(() => {
		const getTreeData = async () => {
			const res = await axios.post('/get/tree/list')
			treeStore.setTreeData(res?.data?.data)
		}
		getTreeData()
	}, [])

	return (
		<>
			<Card style={{ background: '#eee' }}>
				<Header />
				<MyTree
					checkedLeafs={treeStore?.checkedLeafs}
					expandTreeLeafs={treeStore?.expandTreeLeafs}
					treeData={treeStore?.treeData}
					isOpenAll={treeStore?.isOpenAll}
					isCheckedAll={treeStore?.isCheckedAll}
					onCheck={treeStore?.onCheck}
				/>
				<div id="elemap-container" className="mapContainer">
					<GAmap containerID="elemap-container" selectRow={{}} />
				</div>
			</Card>
		</>
	)
})

export default App
